<template>
  <el-row>
    <el-col :span="6" :offset="2">
      <el-radio-group v-model="checkVal">
        <el-radio-button label="全部" />
        <el-radio-button label="已完成" />
        <el-radio-button label="未完成" />
      </el-radio-group>
    </el-col>
  </el-row>
</template>

<script setup lang="ts">
import {ref, toRefs, watch} from "vue";
import {defaultStore} from "@/store/store";

// -----------响应式数据部分开始----------
const checkVal = ref('全部')

const state = defaultStore()

const { viewKey } = toRefs(state)
// -----------响应式数据部分结束----------

// -----------方法部分开始----------
// 监听全部、已完成、为完成以此来显示不同任务列表中的数据
watch(checkVal, (val) => {
  console.log('just a watch!!')
  console.log(val)
  switch (val) {
    case '全部':
      viewKey.value = 'all'
      break
    case '未完成':
      viewKey.value = 'unDone'
      break
    case '已完成':
      viewKey.value = 'done'
      break
  }
})
// -----------方法部分结束----------
</script>

<style scoped>
.el-row {
  margin-top: 10px;
}
</style>
